<template>
  <el-tree
    ref="treeRef"
    style="max-width: 600px"
    :data="treeNodes"
    :props="defaultProps"
    @node-click="handleNodeClick"
    default-expand-all
    show-checkbox
    node-key="sysid"
    highlight-current
    :default-checked-keys="[]"
  />
  <hr />
  <el-button type="primary" @click="confirmClick">confirm</el-button>
</template>

<script setup>
import { ref, watch } from 'vue'
import useSysinfoStore from '@/stores/sysinfo.js'
import { storeToRefs } from 'pinia'
import useRoleStore from '@/stores/role.js'

const confirmClick = () => {
  const res = [...treeRef.value.getCheckedKeys(false), ...treeRef.value.getHalfCheckedKeys()]
  console.log(res)
  roleStore.auth4Role(res)
}

const roleStore = useRoleStore() //
const treeRef = ref()
const sysinfoStore = useSysinfoStore()
sysinfoStore.findAllSysnodesTree()
const { treeNodes, now, checkedKeys } = storeToRefs(sysinfoStore)
const { clearTree } = storeToRefs(roleStore)

watch(now, () => {
  setCheckedKeys(checkedKeys.value)
})

watch(clearTree, () => {
  setCheckedKeys([])
})

const setCheckedKeys = (checkedKess) => {
  console.log(checkedKess)

  treeRef.value.setCheckedKeys(checkedKess, false)
}

const handleNodeClick = (data) => {
  console.log(data)
}

const defaultProps = {
  children: 'children',
  label: 'title'
}
</script>
